<style scoped>

</style>
<template>
    <div>
        <Card dis-hover>
            <div class="page-body">
                <Form ref="queryForm" :label-width="80" label-position="left" inline>
                    <Row :gutter="16">
                        <Col span="8">
                            <FormItem label="地区名称" style="width:100%">
                                <Input
                                    v-model="requestParams.name"
                                    placeholder=""
                                    clearable
                                ></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <Button
                                icon="ios-search"
                                type="primary"
                                size="small"
                                @click="getTreeData"
                            >{{L('Find')}}</Button>
                            <Button
                                @click="create(null)"
                                icon="md-add"
                                type="primary"
                                size="small"
                                class="toolbar-btn"
                            >{{L('Add')}}</Button>
                        </Col>
                    </Row>
                </Form>
                <Tree :data="treeData" :render="renderContent" @on-toggle-expand="toggleExpand"></Tree>
                <Spin size="large" fix v-if="spinShow"></Spin>
            </div>
            <create-region
                v-model="createModalShow"
                :parent-id="selectId"
                @save-success="getTreeData"
            ></create-region>
            <edit-region v-model="editModalShow" :editRegion="selectRegion" @save-success="getTreeData"></edit-region>
        </Card>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import Ajax from "../../lib/ajax";
import CreateRegion from "./create-region.vue";
import EditRegion from "./edit-region.vue";
import Region from "../../store/entities/region";
@Component({
    components: { CreateRegion, EditRegion }
})
export default class Regions extends AbpBase {
    treeData: Array<any> = new Array<any>();
    buttonProps = {
        type: "default",
        size: "small"
    };

    requestParams = { name: null };

    createModalShow: boolean = false;
    editModalShow: boolean = false;

    selectId: number | null = null;
    selectRegion: Region = new Region();
    spinShow = false;

    // 展开的结点Id
    expandIds:Array<number> = [];
    async getTreeData() {
        this.spinShow = true;
        let rep = await Ajax.get("/api/services/app/Region/GetTreeData", {
            params: this.requestParams
        });
        this.treeData = rep.data.result;
        this.setOpen(this.treeData);
        this.spinShow= false;
    }
    create(pid) {
        this.selectId = pid;
        this.createModalShow = true;
    }
    // 存储展开的节点
    toggleExpand(ele){
        if(ele.expand){
            this.expandIds.push(ele.id);
        } else {
            this.expandIds.splice(this.expandIds.findIndex(item => (item as any).id === ele.id), 1);
        }
    }
    edit(reg) {
        this.selectRegion = Util.extend(true,{},reg);
        this.editModalShow = true;
    }
    // 还原展开的节点
    setOpen(data: any){
        if(data.length && data.length >0){
            for (let i = 0; i < data.length; i++) {
                const element = data[i];
                if (this.expandIds.includes(element.id) && element.layer <3) {
                    element.expand = true;
                }
                if (element.children && element.children.length >0) {
                    this.setOpen(element.children);
                }
            }
        }
    }
    async delete(pid) {
        await Ajax.delete('/api/services/app/Region/Delete?Id='+ pid);
    }
    async created() {
        this.$Message.config({
            top: 300
        });
        this.getTreeData();
    }
    renderContent(h, { root, node, data }) {
        return h(
            "span",
            {
                style: {
                    display: "inline-block",
                    width: "100%"
                }
            },
            [
                h("span", [
                    h("Icon", {
                        props: {
                            type: "ios-pin-outline"
                        },
                        style: {
                            marginRight: "8px"
                        }
                    }),
                    h("span", data.name)
                ]),
                h(
                    "span",
                    {
                        style: {
                            display: "inline-block",
                            //float: "right",
                            marginLeft: "32px"
                        }
                    },
                    [
                        data.layer != 3 &&
                            h(
                                "span",
                                {
                                    "class":{
                                        iconfont: true
                                    },
                                    style: {
                                        marginRight: "8px"
                                    },
                                    on: {
                                        click: () => {
                                            this.create(data.id);
                                        }
                                    },
                                    domProps: {
                                        innerHTML: '&#xe71b;'
                                    }
                                }
                            ),
                        h(
                            "span",
                            {
                                "class":{
                                    iconfont: true
                                },
                                style: {
                                    marginRight: "8px"
                                },
                                on: {
                                    click:  () => {
                                        this.edit(data);
                                    }
                                },
                                domProps: {
                                    innerHTML: '&#xe8ad;'
                                }
                            }
                        ),
                        h(
                            "span",
                            {
                                "class":{
                                    iconfont: true
                                },
                                on: {
                                    click: async () => {
                                        this.$Modal.confirm({
                                            title: this.L("Tips"),
                                            content: "你确定要删除该地区吗？",
                                            loading: true,
                                            okText: this.L("Yes"),
                                            cancelText: this.L("No"),
                                            onOk: async () => {
                                                await this.delete(data.id);
                                                this.$Modal.remove();
                                                await this.getTreeData();
                                            }
                                        });
                                    }
                                },
                                domProps: {
                                    innerHTML: '&#xe645;'
                                }
                            }
                        )
                    ]
                )
            ]
        );
    }
}
</script>